<template>
    <div class="poly-set-container">
        <div class="header">
            <div class="title">请输入关联聚合账号ID</div>
            <div class="input"><input type="number" placeholder="请点击此处输入聚合账号ID" v-model="aid"/></div>
        </div>
        <!--流程和使用说明-->
        <div class="code" @click="toExplain">
            <div class="left">
                <span>聚合账号功能与流程说明(内附聚合账号操作视频)</span>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <!--<div class="note">{{ noteText }}</div>-->
        <div class="btn-db">
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    :textBtn="textBtn"
                    color="#fff"
                    size="14"
                    @click.native="sendBindApply"
            ></button-normal>
        </div>
        <Confirm
                title="请求发送成功"
                html="请返回<span class='stress'>“我的-聚合账号”</span>中登录聚合账号</br>，点击<span class='stress'>“增加新系统”</span>按钮， 找到对应请求并同意。"
                :isAlert="true"
                ref="successAlert"
                @confirm="toUser"
                confirmBtnText="去设置"
                @cancel="toUser"
        ></Confirm>

        <Confirm title="请先设置安全密码" @confirm="setPro" cancelBtnText="取消" confirmBtnText="去设置" ref="failAlert"></Confirm>
    </div>
</template>

<script>
    import {commonMixin, sysMixin} from '@/common/mixin';
    import Confirm from '@/components/common/confirm';
    import api from '@/request/api';
    import buttonNormal from '@/components/common/buttonNormal';

    export default {
        mixins: [commonMixin, sysMixin],
        name: 'poly-set',
        data() {
            return {
                aid: '',
                textBtn: '发送绑定请求',
                noteText: `
                关联系统（聚合账号）绑定步骤:
                1、进入【我的】-【聚合账号】-【注册】，注册聚合账号。
                2、登录账号，记录聚合账号ID。
                3、输入聚合账号ID号，发送绑定需求。
                4、进入【我的】-【聚合账号设置】-【增加新系统】，同意对应请求。

                关联系统（聚合账号）说明：
                1、新客户在跳转进入聚合账号内绑定的其他品牌系统时，默认跳转进入已绑定聚合账号的对应品牌账号下。
                2、当多账号在聚合账号同一品牌内时，默认系统为置顶系统。
                3、绑定聚合帐号不受限制，同意请求即可绑定。
                4、聚合账号可以看到绑定账号内各系统名称、身份、品牌、余额。
                5、用户在商城首页可以进入聚合账号内其他品牌系统，购买商品即可绑定关系。
            `
            };
        },
        props: {},
        computed: {},
        created() {
            this.checkPassword();
        },
        mounted() {
            //处理软键盘导致absolute和fixed定位错误的问题
            // let initHeight = document.body.clientHeight;
            // window.onresize = () => {
            //     document.getElementsByClassName('poly-set-container')[0].style.height = initHeight + 'px';
            // };
        },
        methods: {
            toExplain() {
                //  去账号说明
                this.$router.push({
                    name: 'poly-explain'
                });
            },
            checkPassword() {
                this.request
                    .get(api.isSecurity)
                    .then((res) => {
                        this.isPass = res.exists;
                        if (!this.isPass) {
                            this.$refs.failAlert.show();
                        }
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            sendBindApply() {
                if (!this.isPass) {
                    this.$refs.failAlert.show();
                    return;
                }
                const brand = this.system.toString().substring(0, 1);
                const system = this.system;
                return this.request
                    .post(api.sendRequest, {aid: this.aid, brand: brand, system: system})
                    .then((res) => {
                        if (res) {
                            this.$refs.successAlert.show();
                        }
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            toUser() {
                this.$router.push({
                    name: 'user'
                });
            },
            setPro() {
                //    跳转设置安全密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: '6'
                    }
                });
            }
        },
        watch: {},
        components: {Confirm, buttonNormal}
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'

    * {
        box-sizing border-box
    }

    .poly-set-container {
        position: relative
        width: 100vw
        height 100vh
        .code {
            height vw(45)
            padding 0 cellPadding
            flex-x()
            background-color grayF
            margin-bottom 1px
            .left {
                flex 1
                flex-x(flex-start, center)
                .code-icon {
                    width vw(22)
                    height vw(22)
                    fill gray6
                }
                span {
                    line-height vw(22)
                    margin-left smallMargin
                    word-vw(word14, gray3)
                }
            }
            .icon {
                width vw(8)
                height vw(12)
                fill gray6
            }
        }
        .header {
            margin-bottom vw(14)
            .title {
                height vw(42)
                margin-bottom vw(1)
                word-vw(word14, gray3)
                line-height vw(19)
                padding-left cellPadding
                flex-x(flex-start, center)
                background-color grayF
            }
            .input {
                height vw(97)
                flex-x(flex-start, center)
                background-color grayF
                input {
                    width 100%
                    padding 0 cellPadding !important
                    word-vw(word18, gray9)
                    line-height vw(24)
                    padding smallMargin vw(31)
                    &:focus {
                        color gray3
                    }
                }
            }
        }

        .note {
            margin titleMargin cellPadding
            word-vw(word12, gray9)
            line-height vw(16)
            white-space pre-line
            other = vw(214);
            height "calc(100% - %s)" % other;
        }
        .btn-db {
            position fixed
            background white
            width 100vw
            bottom 0
        }
        @media (max-height: 400px) {
            .btn-db {
                display: none;
            }
        }

    }
</style>
